<template>
  <div class="choose-company" v-loading="loading">
    <Header class="header" />
    <div class="loadingShadow" v-show="loadingShadow"></div>
    <div class="vantaRef" ref="vantaRef" style="width: 100%; height: 100%"></div>
    <!-- 选择系统 -->
    <div class="system-choose-modal">
      <div class="system-choose-box" :style="{ transform: isShowSystem ? 'translate(0, 0)' : 'translate(0, -500px)' }">
        <div class="system-content swiper-container">
          <div class="system-list swiper-wrapper">
            <!-- 卡片式 -->
            <template>
              <div v-for="(item, index) in swiperList" class="system-choose-item swiper-slide" :key="index">
                <div class="system" v-for="(system, systemIndex) in item" :key="systemIndex + index"
                  @click="chooseSystem(system)">
                  <div class="img">
                    <img :src="system.imgUrl" alt="" />
                  </div>
                  <div class="name">
                    <i class="el-icon-menu"></i> {{ system.virtualSystemName }}
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>

      <div class="system-choose-box" :style="{ transform: isShowSystem ? 'translate(0, 0)' : 'translate(0, 500px)' }">
        <div class="system-content swiper-container">
          <div class="system-list swiper-wrapper">
            <!-- 卡片式 -->
            <template v-for="(item, index) in bigScreenList">
              <div :key="index" class="system-choose-item swiper-slide">
                <div class="system" v-for="(system, systemIndex) in item" :key="systemIndex"
                  @click="chooseBigScreen(system)">
                  <div class="img">
                    <img :src="system.picUrl || bigscreen" alt="" />
                  </div>
                  <div class="name">
                    <i class="el-icon-menu"></i> {{ system.bigScreenName }}
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="backBtn" @click="noneOrganization = false" :style="{ left: noneOrganization ? '0px' : '-12px' }">
        <i class="el-icon-caret-right"></i>
      </div>
      <div class="back" @click="isShowSystem = false" :style="{ left: isShowSystem ? '0px' : '-12px' }">
        <i class="el-icon-caret-right"></i>
      </div>
      <div class="system-organization flex"
        :class="isShowSystem ? 'system-organization isShowSystem' : 'system-organization'" :style="{
          transform: noneOrganization ? '' : '',
          width: noneOrganization ? 'calc(100vw + 290px)' : '100vw',
        }">
        <div class="organization" :class="noneOrganization ? 'organization noneOrganization' : 'organization'">
          <div class="handerTitle">
            <span class="titlenName">公司组织</span>
            <i class="el-icon-s-fold icon" @click="noneOrganization = true"></i>
          </div>
          <div>
            <el-input class="searchInput" v-model="searchOrganization" placeholder="搜索公司组织"><i slot="suffix"
                class="el-input__icon el-icon-search"></i></el-input>
          </div>
          <div class="organizationList">
            <div class="textHidden" :class="organizationName == item.organizationName ? 'chooseStyle' : ''" v-show="!searchOrganization ||
              item.organizationName.indexOf(searchOrganization) !== -1
              " v-for="(item, index) in allOrganizationList" :key="index"
              @click="inputSystem(item.organizationNo, item.organizationName)">
              {{ item.organizationName }}
            </div>
          </div>
        </div>
        <div class="organizationInfo">
          <div class="info" v-for="(item, index) in organizationList" :key="index"
            @click="inputSystem(item.organizationNo, item.organizationName)">
            <div class="img"></div>
            <div class="orgName">{{ item.organizationName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { constantRoutes } from "@/router";
import { getpasCookie } from "@/utils/cookie";
import store from "@/store";
import Siderbar from "./components/Siderbar";
import Header from "./components/Header";
import Swiper from "swiper";
import systemApi from "@/api/chooseSystem/index";
import * as THREE from "three";
import WAVES from "vanta/src/vanta.waves";
import { initNavbar } from "@/utils/index";
import $baseUrl from "@/utils/baseURL";
import axios from "axios";
export default {
  name: "ChooseSystem",
  components: { Header, Siderbar },
  data() {
    return {
      loading: false,
      searchOrganization: "", //搜索公司组织字段
      swiperList: [], //系统列表
      isShowSystem: true, //是否展示
      noneOrganization: false,
      loadingShadow: false, //是否展示
      virtualSystemList: [], //系统列表
      allOrganizationList: [], //公司所有组织
      organizationList: [], //顶级组织下的子级
      organizationName: "", //当前选中的公司组织
      child_system: [], //子系统
      bigScreenList: [], //驾驶舱集合
      pathList: [],
      breedTypeCode: "",
      timer: null,
      bigscreen: require("@/assets/bigscreen.jpg"),
      virtualSystemNoList: [
        {
          no: "SY-YY",
          flag: "YY",
          imgUrl: require("@/assets/choose-company/yy.png"),
        },
        {
          no: "SY-SC",
          flag: "SC",
          imgUrl: require("@/assets/choose-company/scxt.png"),
        },
        {
          no: "traceability",
          flag: "SY",
          imgUrl: require("@/assets/choose-company/syxt.png"),
          url: `${this.$baseurl.urlServiceUrl}traceability-system/#/login`,
        },
        {
          no: "dpManage",
          flag: "DPGL",
          imgUrl: require("@/assets/choose-company/dp.png"),
          url: `${this.$baseurl.urlServiceUrl}bigscreennew/#/`,
        },
        {
          no: "equip",
          flag: "JG",
          imgUrl: require("@/assets/choose-company/nysb.png"),
          url: `${this.$baseurl.urlServiceUrl}agri-machine-management/#/login`,
        },
        {
          no: "PROCESS",
          flag: "NG",
          imgUrl: require("@/assets/choose-company/jggl.png"),
          url: `${this.$baseurl.urlServiceUrl}agricultural-management-platform/#/login-loading`,
        },
        // https://matefarm.net/zhuangYuanHu/#/login?account=U2FsdGVkX1%2BLgNdoVmxYTaRlPpcXeKxGNJdjQJVCXQE%3D&password=U2FsdGVkX1%2F8AqOzSyCn9fCopEim4EqmaZ0dKrv0YHs%3D&organizationNo=ZYH&entrance_flag=IADPLO&databaseName=DB_TDW1_ZYHV3&breedTypeNo=undefined&breedTypeName=undefined&systemName=%E7%8A%B6%E5%85%83%E6%B9%96%E5%9E%82%E9%92%93%E5%9F%BA%E5%9C%B0&farming=FISH
        {
          no: "zyh",
          flag: "zyh",
          imgUrl: require("@/assets/choose-company/nysb.png"),
          url: `${this.$baseurl.urlServiceUrl}zhuangYuanHu/#/login`,
        },
      ],
    };
  },
  async mounted() {
    sessionStorage.setItem("farmingTypeNo", "sc");
    sessionStorage.setItem("systemNo", "SC");
    this.queryTopOrganizationInfo();
    this.initThree();
    this.searchOrganization = "";
    this.isAutoLogin();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.vantaEffect && this.vantaEffect.destroy();
  },
  methods: {
    isAutoLogin() {
      if (sessionStorage.entrance_flag == "IADPLO") {
        this.loadingShadow = true;
        this.timer = setTimeout(() => {
          this.loadingShadow = false;
        }, 5000);
      } else {
        this.loadingShadow = false;
      }
    },
    queryByOrganizationInfo() {
      axios({
        url: `${$baseUrl.agricultureServiceUrl}v3/organization/organization/queryByOrganizationNo?no=${sessionStorage.organizationNo}`,
        method: "get",
      }).then((res) => {
        let { data, code } = res;
        sessionStorage.setItem('storageRules', data.data.storageRules)
        console.log('组织信息：', data)
      });
    },

    queryBreedList() {
      let breedTypeObj = {
        HANGING_WATER_BREED: "DSYZ",
        TRADITION_BREED: "CTYZ",
        CIRCULATE_BREED: "XHSYZ",
        RUNWAY_BREED: "PDYZ",
      };
      axios({
        url: `${$baseUrl.agricultureServiceUrl}v3/organization/fishOrganizationBreedType/queryByCondition`,
        method: "post",
        headers: {
          databaseName: sessionStorage.databaseName,
          accessToken: sessionStorage.token,
          organizationList: sessionStorage.organizationList,
          organizationNo: sessionStorage.organizationNo,
          virtualSystemNo: sessionStorage.virtualSystemNo,
        },
        data: {
          organizationNo: sessionStorage.organizationNo,
        },
      }).then((res) => {
        let { data, code } = res;
        let breedList = data.data || [];
        if (breedList.length > 0) {
          this.$store.dispatch("user/setBreedTypeList", breedList);
          this.breedTypeCode = breedTypeObj[breedList[0].breedTypeNo];
        } else {
          this.$store.dispatch("user/setBreedTypeList", []);
        }
      });
    },
    initThree() {
      this.vantaEffect = WAVES({
        el: this.$refs.vantaRef,
        THREE: THREE,
      });
      VANTA.WAVES({
        el: this.$refs.vantaRef,
        /*以下为样式配置*/
        mouseControls: false,
        touchControls: false,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        scale: 1.5,
        scaleMobile: 10,
        color: 0x5f88,
        shininess: 30,
        waveHeight: 8.0,
        waveSpeed: 0.5,
        zoom: 0,
      });
    },
    chooseSystem(system) {
      this.queryByOrganizationInfo();
      let systemFlag = system.flag;
      this.$store.dispatch("app/setTitle", system.flag);
      sessionStorage.setItem("farming", system.farming || "FISH");
      sessionStorage.setItem("virtualSystemNo", system.virtualSystemNo);
      let logInfo = JSON.parse(sessionStorage.getItem("logInfo") || "{}");
      let userType = logInfo.userType;
      if (system.url) {
        window.location.href = system.url;
        return;
      }
      this.loading = true;
      //获取菜单
      this.$store.dispatch("app/saveRouter", []);
      this.$store.dispatch("app/saveMenuList", []);
      systemApi
        .getSystemMenu(system.virtualSystemNo)
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            let pathList = this.getPath(res.data || []);
            let menuNoList = this.getMenuNo(res.data || []);
            console.log(180, menuNoList);
            let routerList = [];
            //如果需要本地调试可以将userType  改为ADMIN<string>
            // routerList = this.findPathsfilterPath(
            //   constantRoutes,
            //   pathList,
            //   "ADMIN"
            // );
            routerList = this.findPathsfilterPath(constantRoutes, pathList, userType);
            console.log(routerList, "----------------------");
            routerList = routerList.filter((item) => {
              return item.children.length > 0;
            });
            this.$store.dispatch("app/saveRouter", routerList);
            this.$store.dispatch("app/saveMenuList", menuNoList);
            let breedType =
              system.flag == "YY" ? system.flag : this.breedTypeCode;
            //切换运营/生产的菜单
            initNavbar(systemFlag, breedType);
            //在这里判断需要跳转的路由，路由菜单时配置的所以我们获取路由菜单的一级菜单作为我们默认跳转的菜单

            console.log(sessionStorage.virtualSystemNo, '在这里判断需要跳转的路由，路由菜单时配置的所以我们获取路由菜单的一级菜单作为我们默认跳转的菜单')
            if (routerList.length && routerList[0].children.length) {
              if (sessionStorage.virtualSystemNo == "SY-YY" || systemFlag == "YY") {
                this.$router.push("/facilityDistribute");
              } else if (sessionStorage.virtualSystemNo == "SY-SC" || systemFlag == "SC") {
                this.$router.push("/earlyWarningCenter");
              } else {
                this.$router.push(routerList[0].children[0].path);
              }
              this.jumpSystem(routerList, systemFlag, userType);
              this.initData(systemFlag);
            } else {
              this.$message.warning("未配置菜单，请联系管理员进行配置");
            }
          } else {
            this.$message.warning(res.msg || "获取系统菜单失败");
          }
        })
        .catch((err) => {
          this.child_system = [];
          this.loading = false;
          this.$message.warning("获取系统菜单失败");
        });
    },
    //判断跳转路由
    jumpSystem(routerList, systemFlag, userType) {
      if (!(routerList.length && routerList[0].children.length)) {
        this.$message.warning("未配置菜单，请联系管理员进行配置");
        return;
      }
      if (sessionStorage.virtualSystemNo == "SY-YY" || systemFlag == "YY") {
        this.$router.push("/facilityDistribute");
      } else if (sessionStorage.virtualSystemNo == "SY-SC" || systemFlag == "SC") {
        this.$router.push("/earlyWarningCenter");
      }
      // if (userType == "ADMIN") {
      //   if (sessionStorage.virtualSystemNo == "SY-YY" || systemFlag == "YY") {
      //     this.$router.push("/facilityDistribute");
      //   } else if (sessionStorage.virtualSystemNo == "SY-SC" || systemFlag == "SC") {
      //     this.$router.push("/earlyWarningCenter");
      //   }
      // } else {
      //   this.$router.push(routerList[0].children[0].path);
      // }
    },
    //加载数据//跳转系统后加载需要的基础数据
    initData(systemFlag) {
      if (sessionStorage.virtualSystemNo == "SY-SC" || systemFlag == "SC") {
        store.dispatch("initData/queryEnumList");
        store.dispatch("initData/querySpec");
      }
      store.dispatch("initData/queryFishPond");
      store.dispatch("initData/queryFacilityGroup");
      store.dispatch("initData/queryPerson");
      store.dispatch("initData/queryStordoc");
      store.dispatch("initData/queryAllFacilityDetail");
      store.dispatch("initData/queryLessesByCondition");
      store.dispatch("initData/queryFacilityType");
    },
    findPathsfilterPath(data, pathToFind, userFlag) {
      let pathList = [];
      let nodes = JSON.parse(JSON.stringify(data));
      if (userFlag == "ADMIN") {
        nodes.forEach((item) => {
          let childList =
            item.children && item.children.length > 0
              ? this.findPathsfilterPath(item.children, pathToFind, userFlag)
              : [];
          pathList.push({
            ...item,
            children: childList,
          });
        });
      } else {
        console.log(nodes);
        nodes.forEach((item) => {
          if (pathToFind.includes(item.path)) {
            let childList =
              item.children && item.children.length > 0
                ? this.findPathsfilterPath(item.children, pathToFind)
                : [];
            pathList.push({
              ...item,
              children: childList,
            });
          }
        });
      }
      pathList = pathList.filter((item) => {
        return item.path !== "/login" && item.path !== "/chooseSystem";
      });
      return pathList;
    },
    getMenuNo(routerList) {
      let menuNo = [];
      routerList.forEach((router) => {
        menuNo.push({
          path: router.path,
          menuNo: router.menuNo,
        });
        if (router.children && router.children.length > 0) {
          menuNo = menuNo.concat(this.getMenuNo(router.children));
        }
      });
      return menuNo;
    },
    getPath(routerList) {
      let pathList = [];
      routerList.forEach((router) => {
        pathList.push(router.path.split(/[\t\r\f\n\s]*/g).join(""));
        if (router.children && router.children.length > 0) {
          pathList = pathList.concat(this.getPath(router.children));
        }
      });
      return pathList;
    },
    //大屏
    chooseBigScreen(item) {
      let c = JSON.parse(sessionStorage.userInfo);
      let x = getpasCookie(c.account + "&" + c.password);
      // 老配置化大屏
      if (item.url.includes("bigscreencfi")) {
        let zhurl = `${item.url}?token=${c.account + "&" + c.password
          }&organizationNo=${sessionStorage.organizationNo}&virtualSystemNo=${item.virtualSystemNo
          }`;
        window.open(zhurl, "_blank");
        return;
        // 新配置大屏？？
      } else if (item.url.includes("dataVfarmService")) {
        let zhurl = `${item.url}?token=${c.account + "&" + c.password
          }&organizationNo=${sessionStorage.organizationNo}`;
        window.open(zhurl, "_blank");
        return;
        // 新配置大屏？？
      } else if (item.url.includes("showCockpit")) {
        let json = { username: x.account, password: x.password };
        let token = btoa(encodeURIComponent(JSON.stringify(json)));
        let zhurl = `${item.url}?token=${token}&organizationNo=${sessionStorage.organizationNo}&databaseName=${sessionStorage.databaseName}`;
        window.open(zhurl, "_blank");
        return;
        // 老大屏的单独项目
      } else {
        let zhurl = `${item.url}?account=${x.account}&password=${x.password}&organizationNo=${sessionStorage.organizationNo}`;
        window.open(zhurl, "_blank");
        return;
      }
    },
    transformRoutes(routes, rst = []) {
      routes.forEach((route) => {
        rst.push(route.path);
        if (route.children && route.children.length > 0) {
          this.transformRoutes(route.children, rst);
        }
      });
      return rst;
    },
    initSwiper() {
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          centeredSlides: true, //页面居中
          slidesPerView: 1,
        });
      });
    },
    queryTopOrganizationInfo() {
      systemApi
        .queryTopOrganization()
        .then((res) => {
          if (res.code == 1 && res.data && res.data[0]) {
            let topNo = res.data[0]["organizationNo"];
            sessionStorage.setItem("topOrganization", topNo);
            this.queryOrganizationInfo(topNo);
            this.queryByOrganizationNoInfo(topNo);
          }
        })
        .catch((err) => {
          console.log("queryTopOrganization", err);
          this.$message.error("获取顶级组织失败！");
        });
    },
    //根据顶级组织编号获取对应数据库
    queryByOrganizationNoInfo(topNo) {
      systemApi
        .queryByOrganizationNo(topNo)
        .then((res) => {
          console.log("顶级组织数据库：", res.data);
          if (res.code == 1) {
            // sessionStorage.setItem('organizationNo', res.data.organizationNo)
            sessionStorage.setItem("databaseName", res.data.databaseName);
            this.getInfo(sessionStorage.getItem("username"));
          }
        })
        .catch((err) => {
          console.log("queryByOrganizationNo", err);
          this.$message.error("获取顶级组织编号失败！");
        });
    },
    getInfo(username) {
      if (username) {
        this.loading = true;
        systemApi
          .getInfo(username)
          .then((res) => {
            this.loading = false;
            if (res.code == 1 && res.data) {
              console.log("用户信息：", res.data);
              let logInfo = JSON.stringify(res.data || {});
              sessionStorage.setItem("logInfo", logInfo);
              sessionStorage.setItem("userType", res.data.userType);
            } else {
              this.loading = false;
              sessionStorage.setItem("logInfo", "");
            }
          })
          .catch((err) => {
            this.loading = false;
            console.log("getInfo", err);
            this.$message.error("获取用户信息失败！");
          });
      } else {
        this.$message.info("无登陆人信息！请退出后重新登录！");
      }
    },
    //根据顶级组织编号获取虚拟系统下的组织
    queryOrganizationInfo(no) {
      this.loading = true;
      systemApi
        .queryOrganization(no)
        .then((res) => {
          if (res.code == 1) {
            this.queryTreeByOrganizationNoListInfo();
            this.organizationList = res.data;
            if (this.organizationList.length == 1) {
              let { organizationNo, organizationName } =
                this.organizationList[0];
              this.loading = false;
              this.inputSystem(organizationNo, organizationName);
            }
            this.queryBreedList();
            console.log("平级组织：", this.organizationList);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log("queryByOrganizationNo", err);
          this.$message.error("获取虚拟系统下的组织失败！");
        });
    },
    //获取组织下的下属组织
    queryTreeByOrganizationNoListInfo() {
      let noList = [];
      this.organizationList.forEach((item) => {
        noList.push(item.organizationNo);
      });
      systemApi
        .queryTreeByOrganizationNoList(noList)
        .then((res) => {
          if (res.code == 1) {
            this.allOrganizationList = res.data;
            this.isShowSystem = false;
          }
          console.log("公司组织：", this.allOrganizationList);
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取下属组织失败！");
        });
    },
    //获取组织下的系统
    inputSystem(no, name) {
      this.queryChildOrganizationNoInfo();
      sessionStorage.setItem("organizationNo", sessionStorage.childOrganizationNo || no);
      sessionStorage.setItem("organizationName", name);
      this.organizationName = name;
    },
    queryChildOrganizationNoInfo() {
      this.loading = true;
      systemApi
        .queryChildOrganizationNo()
        .then((res) => {
          this.loading = false;
          sessionStorage.setItem("organizationNoList", res.data);
          this.queryVirtualSystem();
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
          this.$message.error("获取子组织标识失败！");
        });
    },
    queryVirtualSystem() {
      //过去sassions数据
      let organizationNo = sessionStorage.getItem("organizationNo");
      let accountPassword = sessionStorage.getItem("accountPassword");
      let account = sessionStorage.getItem("account");
      let password = sessionStorage.getItem("password");
      let entrance_flag = sessionStorage.getItem("entrance_flag");
      this.loading = true;
      systemApi
        .queryVirtualSystem()
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            let routerParams = {
              account: account,
              password: password,
              token: accountPassword, //这里的token是加密的账号密码
              organizationNo: organizationNo,
              farming: "FISH",
              farmingTypeNo: "sc",
              entrance_flag: entrance_flag,
            };
            let paramsStr = "";
            for (let key in routerParams) {
              paramsStr += `${key}=${routerParams[key]}&`;
            }

            //过滤掉擅渔app
            let systemList = res.data.filter((item) => {
              return (
                item.virtualSystemNo.indexOf("app") === -1 &&
                item.virtualSystemNo.indexOf("App") === -1 &&
                item.virtualSystemNo.indexOf("APP") === -1
              );
            });
            this.virtualSystemList = systemList.filter((e) => {
              return this.virtualSystemNoList.find((item) => {
                if (e.virtualSystemNo == item.no) {
                  e.imgUrl = item.imgUrl;
                  if (item.no == "dpManage") {
                    e.url = this.getDpManageurl(item);
                  } else {
                    e.url = item.url ? `${item.url}?${paramsStr}` : "";
                  }
                  e.flag = item.flag;
                  e.farming = item.farming || "";

                  console.log(e.url);
                }
                return e.virtualSystemNo == item.no;
              });
            });
            if (this.virtualSystemList.length > 0) {
              //如果是从农业平台统一登录入口 过来的 并且携带系统标识可以直接进入指定系统
              if (
                sessionStorage.virtualSystemNo &&
                sessionStorage.entrance_flag == "IADPLO"
              ) {
                let rut = this.virtualSystemList.find((item) => {
                  return sessionStorage.virtualSystemNo == item.virtualSystemNo;
                });
                this.chooseSystem(rut);
              }
              this.isShowSystem = true;
              this.noneOrganization = false;
            } else {
              this.virtualSystemList = [];
              this.isShowSystem = false;
              this.$message.info("未配置系统:SYXT");
            }
            this.swiperList = this.split_array(this.virtualSystemList, 6);
            this.initSwiper();
            console.log("swiperList", this.swiperList);
          }
          console.log(res);
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
          this.$message.error("获取系统列表失败！");
        });
      systemApi
        .queryBigScreen({
          organizationNo: organizationNo,
        })
        .then((res) => {
          let data = res.data || [];
          data = data.filter((item) => {
            return (
              item.type == "sc" ||
              organizationNo == "HUWANG" ||
              organizationNo == "SCXGPD"
            );
          });
          this.bigScreenList = this.split_array(data, 6);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDpManageurl(item) {
      let userInfo = JSON.parse(sessionStorage.userInfo);
      console.log(userInfo);
      let url = `${item.url}?account=${encodeURIComponent(
        userInfo.account
      )}&password=${encodeURIComponent(userInfo.password)}&organizationNo=${sessionStorage.organizationNo
        }&entrance_flag=IADPLO&databaseName=${sessionStorage.databaseName
        }&breedTypeNo=${sessionStorage.breedTypeNo}&breedTypeName=${sessionStorage.breedTypeName
        }&farming=FISH`;
      return url;
    },
    split_array(arr, len) {
      var a_len = arr.length;
      var result = [];
      for (var i = 0; i < a_len; i += len) {
        result.push(arr.slice(i, i + len));
      }
      return result;
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
$slidebarWidth: 40px;
$highBule: rgb(0, 235, 208);

@keyframes borderbg {
  from {
    border-radius: 0;
  }

  to {
    background-color: #fff;
    color: #333;
    border-radius: 20px;
  }
}

.choose-company {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;

  ::v-deep(.header) {
    flex-shrink: 0;
  }
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.back {
  position: fixed;
  left: -12px;
  top: 300px;
  width: 12px;
  height: 50px;
  background: #ffffff;
  color: #889aa4;
  line-height: 50px;
  border-radius: 0 5px 5px 0;
  text-align: center;
  color: #00abfa;
  font-size: 12px;
  transition: all 0.3s;
  cursor: pointer;
}

.backBtn {
  position: fixed;
  left: -12px;
  top: 300px;
  width: 12px;
  height: 50px;
  line-height: 50px;
  border-radius: 0px 5px 5px 0;
  background: #0ea9d8;
  font-size: 12px;
  text-align: left;
  color: #ffffff;
  transition: all 0.3s;
  cursor: pointer;
  z-index: 99;
}

.system-choose-modal {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 200px);
  background-repeat: no-repeat;
  background-position: top center;
  margin-top: 50px;
  opacity: 1;
  transition: all 0.5s;

  // pointer-events: none;
  &.active {
    opacity: 1;
    pointer-events: auto;
  }

  .add-basehome-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 112px;
    height: 26px;
    background: #0480fb;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.26);
    border-radius: 3px;
    color: #fff;
    text-align: center;
    line-height: 26px;
    cursor: pointer;

    .el-icon-plus {
      border: 1px dashed #fff;
      color: #fff;
    }
  }

  .system-choose-box {
    width: 100%;
    height: 50%;
    padding: 10px 0;
    box-sizing: border-box;
    transition: all 0.8s;

    .system-choose-title {
      position: absolute;
      top: 25%;
      left: 50%;
      width: 137px;
      height: 35px;
      color: #fff;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      // border: 1px solid #FFFFFF;
      text-align: center;
      line-height: 32px;
      letter-spacing: 2px;
    }

    .system-content {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .swiper-button-next {
        width: 50px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #ffffff56;
        z-index: 9999;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        cursor: pointer;
      }

      .swiper-button-prev {
        width: 50px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #ffffff56;
        z-index: 9999;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        cursor: pointer;
      }

      .system-list {
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;

        .system-choose-item {
          position: relative;
          color: #fff;
          width: 100%;
          height: 240px;
          display: flex;
          justify-content: space-around;
          transition: all 0.3s;
          cursor: pointer;

          .system {
            width: calc(16% - 10px);
            padding: 10px;
            margin: 0 5px;
            background: #0668969f;
            border: 1px solid #a0e0e5;
            border-radius: 6px;
            box-shadow: 0 0 20px 10px #2a93b560;
            transition: all 0.3s;

            .img {
              border: 1px solid #a0e0e5;
              border-radius: 4px 4px 0 0;
            }

            .name {
              text-align: left;
              line-height: 40px;
              margin-top: 5px;
              padding-left: 10px;
              background: #33333370;
              border-radius: 0 0 4px 4px;
              transition: all 0.3s;
            }

            &:hover {
              transform: scale(1.03);
              color: #00ddfa;

              .name {
                padding-left: 15px;
              }
            }
          }

          .img {
            height: calc(100% - 46px);
            // width: 100%
            // background: url('~@/assets/choose-company/ly1.png') center center no-repeat;
            background-color: #ffffffb7;
            background-size: 100% 100%;
            display: flex;
            flex-direction: row;
            // flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            align-items: center;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

.vantaRef {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/bg.png") no-repeat;
}

.system-organization {
  position: fixed;
  top: 60px;
  right: 0;
  width: 100vw;
  height: calc(100vh - 60px);
  background: #0a0a0a3d;
  align-items: flex-start;
  transition: all 0.8s;
  // transition-timing-function: cubic-bezier(0.78, -0.18, 1, 1);
  z-index: 9;

  .organization {
    width: 275px;
    height: calc(100% - 30px);
    justify-content: flex-start;
    margin: 15px;
    margin-right: 0;
    padding: 10px;
    color: #ffffff;
    // border: 1px solid #07b99c4b;
    // box-shadow: 0px 0px 10px 4px #393b3b28;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #e6e6e6;
    position: relative;

    .organizationList {
      height: calc(100% - 80px);
      color: #0588c5;
      overflow-y: auto;
      transition: all 0.3s;

      div {
        width: 100%;
        height: 45px;
        padding-left: 20px;
        font-size: 14px;
        line-height: 45px;
        margin-top: 15px;
        background: #eaecee70;
        border-radius: 23px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #1c92e0;
          color: #ffffff;
        }
      }

      .chooseStyle {
        background: #1c92e0;
        color: #ffffff;
      }

      &::-webkit-scrollbar {
        width: 0;
      }

      &::-ms-scrollbar {
        width: 0;
      }
    }

    .handerTitle {
      display: flex;
      justify-content: space-between;
      padding: 12px;
      font-size: 14px;

      .titlenName {
        color: #268adb;
        font-weight: bold;
      }

      .icon {
        color: #cecece;
        text-align: right;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }

  .noneOrganization {
    transform: translate(-290px, 0);
  }

  .organizationInfo {
    position: relative;
    width: calc(100% - 290px);
    margin-left: 10px;
    max-height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-y: auto;
    cursor: pointer;

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-ms-scrollbar {
      width: 0;
    }

    .info {
      width: calc(25% - 10px);
      min-width: 300px;
      height: 260px;
      padding: 10px;
      background: #ffffff50;
      margin: 15px 10px 0px 0px;
      transition: all 0.3s;
      border: 1px solid #8dc7eb;
      border-radius: 10px;

      .img {
        width: 100%;
        height: calc(100% - 50px);
        background: #00000050;
        border-radius: 6px 6px 0px 0px;
      }

      .orgName {
        text-align: center;
        line-height: 50px;
        color: #ffffff;
        transition: all 0.6s;
      }
    }

    .info:hover {
      box-shadow: 0 0 5px 5px #6ba19d09;
      transform: translate(0, -5px);
    }
  }
}

.isShowSystem {
  right: 100vw;
}

.header {
  box-shadow: 0 0 20px 0px #35353575;
}
</style>

<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.is-horizontal {
  display: none;
}

.searchInput {
  input {
    border-radius: 30px;
    background: #d9d5f05b;
  }
}

.textHidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

::v-deep .choose-company {
  .el-loading-mask {
    background-color: #ffffff !important;
  }
}

.loadingShadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 1000;
}
</style>
